// Styles for the crop info container

.crop-info-container {
  padding: 0;

  .crop-hero {
    position: relative;
    height: 300px;
    background-color: $openfarm-green-muted;
    background-size: cover;
    background-position: center;
    background-image: image-url("leaf-grey-canopy.png");

    .crop-name {
      position: absolute;
      margin: 0;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 50px 10px 10px;
      color: $white;
      /* FIXME: Avoid compass gradient for some reason.
         When using compass' background image function,
         linear gradients output an error:
         `Cannot determine the opposite position of: to`, our personal
         method defined in presets doesn't have this issue.
         see: https://github.com/FarmBot/OpenFarm/issues/325; */
      @include background-gradient(rgba(0, 0, 0, .85), rgba(0, 0, 0, 0));
      // @include background-image(linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0)));
    }
  }
}

// Shrink the new crop button on small screens
@media #{$medium-up} {
  .crop-info-container {
    .new-crop-button {
      height: 100px;
    }
  }
}
